import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import './index.less';

export default function LiFir() {
    const num = [1, 2, 3, 4, 5, 6];

    const [total, setTotal] = useState();
    const divRef = window.divRef = useRef();
    return <div className="li-fir" style={{
        // height:150
    }} ref={divRef}>
        <ul>
            <li className="one">
                <section >
                    <h4 style={{textAlign:'center'}}>地震灾害({4})</h4>
                    <p><img src={require('./img/dz.gif')} alt='' style={{
                       
                        width: '50px',
                        height: '50px'
                    }} />{total}</p>
                </section>

            </li>
            <li className="one">
                <h4 style={{textAlign:'center'}}>洪涝灾害({5})</h4>
                <p><img src={require('./img/hl.gif')} alt='' style={{
                   
                    width: '50px',
                    height: '50px'
                }} /></p>
            </li>
            <li className="one">
                <h4 style={{textAlign:'center'}}>竹林火灾({3})</h4>
                <p><img src={require('./img/zl.gif')} alt='' style={{
                    alignContent: 'center',
                    top: '2%',
                    width: '50px',
                    height: '50px'
                }} /></p>
            </li>
            <li className="one">
                <h4 style={{textAlign:'center'}}>森林火灾({num[2]})</h4>
                <p><img src={require('./img/sl.gif')} alt='' style={{
                    alignContent: 'center',
                    width: '50px',
                    height: '50px'
                }} /></p>
            </li>
            <li className="one">
                <h4 style={{textAlign:'center'}}>气象灾害({num[0]})</h4>
                <p><img src={require('./img/qx.gif')} alt='' style={{
                    alignContent: 'center',
                    width: '50px',
                    height: '50px'
                }} /></p>
            </li>
            <li className="one">
                <h4 style={{textAlign:'center'}}>地质灾害({num[1]})</h4>
                <p><img src={require('./img/dzzh.gif')} alt='' style={{
                    alignContent: 'center',
                    width: '50px',
                    height: '50px'
                }} /></p>
            </li>
            <li className="one">
                <h4 style={{textAlign:'center'}}>地面沉降({6})</h4>
                <p><img src={require('./img/cj.gif')} alt='' style={{
                    alignContent: 'center',
                    width: '50px',
                    height: '50px'
                }} /></p>
            </li>
            <li className="one">
                <h4 style={{textAlign:'center'}}>地面崩塌({6})</h4>
                <p><img src={require('./img/bt.gif')} alt='' style={{
                    alignContent: 'center',
                    width: '50px',
                    height: '50px'
                }} /></p>
            </li>


        </ul>
    </div>;

}

